﻿
@{
    ViewData["Title"] = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@using Microsoft.AspNetCore.Localization
@using Microsoft.AspNetCore.Mvc.Localization
@inject IViewLocalizer Localizer

@this.RefStyle("~/content/easyui/easyui.css")
@this.RefStyle("~/content/easyui/icon.css")
@this.RefScript("~/content/easyui/jquery.easyui.min.js")
@this.RefScript("~/content/js/knockout-easyui.debug.js")

<div>
    <div style="width:18%;float:left; height:90%;overflow:auto;">
        <div style="height:10px;"></div>
        @*组织树*@
        <ul id="orgTree" class="ztree"></ul>

    </div>
    <div style="width:2%;float:left;"></div>
    <div style="width:80%;float:right;">

        <div class="topPanel">
            <div class="toolbar">
                <div class="btn-group">
                    <a class="btn btn-primary-blue" onclick="$dh.reload()"><span class="glyphicon glyphicon-refresh"></span></a>
                </div>
                <div class="btn-group">
                    <button class="btn btn-primary-blue" data-bind="click:Edit,attr:{disabled:!DataTable.SelectedModel()}"><i class="fa fa-pencil-square-o"></i>@Localizer["Update"]</button>
                    <button class="btn btn-primary-blue" data-bind="click:Delete,attr:{disabled:!DataTable.SelectedModel()}"><i class="fa fa-trash-o"></i>@Localizer["Delete"]</button>
                    <button class="btn btn-primary-blue" data-bind="click:Add"><i class="fa fa-plus"></i>@Localizer["Add"]</button>
                </div>
            </div>
            <div class="search">
                <table>
                    <tr>
                        <td>
                            <div class="input-group">
                                <input id="txt_keyword" type="text" class="form-control" placeholder="@Localizer["OrgPlaceHolder"]" style="width: 200px;" data-bind="value:SearchModel().keyword">
                                <span class="input-group-btn">
                                    <button id="btn_search" type="button" class="btn  btn-primary-blue" data-bind="click:Search"><i class="fa fa-search"></i></button>
                                </span>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
        </div>

        <div class="table-responsive">
            <table class="table table-hover table-striped" data-bind="with:DataTable">
                <thead>
                    <tr>
                        @*<th><input type="checkbox" data-bind="click:$parent.SelectAllCheck" ></th>*@
                        <th style="width:20px;"></th>
                        <th>名称</th>
                        <th>节点序号</th>
                        <th>序号</th>
                        <th>编号</th>
                        <th>类型</th>
                        <th>父节点</th>
                        @*<th>负责人</th>
                        <th>电话</th>*@
                        <th>创建时间</th>
                        <th>备注</th>
                    </tr>
                </thead>
                <tbody data-bind="foreach:Models">
                    <tr data-bind="click:$parent.SelectRow">
                        @*<td><input type="checkbox" data-bind="value:Id,checked:$parent.SelectCheckArrays()"></td>*@
                        <td data-bind="text:$parent.GetOrdinal($index())"></td>
                        <td data-bind="text:FullName"></td>
                        <td data-bind="text:IndexId"></td>
                        <td data-bind="text:SortIndex"></td>
                        <td data-bind="text:EnCode"></td>
                        <td data-bind="text:exFunc(CategoryId)"></td>
                        <td data-bind="text:ParentName"></td>
                        @*<td data-bind="text:ManagerId"></td>
                        <td data-bind="text:TelePhone"></td>*@
                        <td data-bind="dateString:CreatedOn"></td>
                        <td data-bind="text:Description"></td>
                    </tr>
                </tbody>
                @this.Partial("_tfoot")
            </table>
        </div>

    </div>
</div>



<dialogbox data-bind="with:Dialog">
    <form id="form1">
        <div style="margin-top: 10px; margin-left: 10px; margin-right: 10px;">
            <div style=" margin-right: 30px;">
                <table class="form">
                    <tr>
                        <td class="formTitle">上级</td>
                        <td class="formValue">
                            @*<select id="Org_ParentId" name="Org_ParentId" style="width:159px;height:30px;" class="form-control required" data-bind="value:Model().ParentId">
                                    <option value="0">父节点</option>
                                </select>*@
                            <input type="text" id="Org_ParentId" name="Org_ParentId" style="width:159px;height:30px;" class="form-control required"  />
                        </td>
                        <td class="formTitle">类型</td>
                        <td class="formValue">
                            <select id="CategoryId" name="CategoryId" class="form-control required" data-bind="value:Model().CategoryId">
                                <option value="">==请选择==</option>
                                <option value="Group">集团</option>
                                <option value="Company">公司</option>
                                <option value="Department">部门</option>
                                <option value="WorkGroup">小组</option>
                            </select>


                        </td>
                    </tr>
                    <tr>

                        <td class="formTitle">名称</td>
                        <td class="formValue">
                            <input id="Name" name="Name" type="text" class="form-control required" placeholder="请输入名称" data-bind="value:Model().FullName" />
                        </td>
                        <td class="formTitle">编号</td>
                        <td class="formValue">
                            <input id="EnCode" name="EnCode" type="text" class="form-control required" placeholder="请输入编号" data-bind="value:Model().EnCode" />
                        </td>
                    </tr>
                    <tr>
                        <td class="formTitle">序号</td>
                        <td class="formValue" colspan="3">
                            <input type="number"  id="SortIndex" name="SortIndex" class="form-control required" data-bind="value:Model().SortIndex" />
                        </td>
                    </tr>
                    <tr>
                        <td class="formTitle">负责人</td>
                        <td class="formValue">
                            <input id="Manager" name="Manager" type="text" class="form-control" data-bind="value:Model().ManagerId" />
                        </td>
                        <td class="formTitle">手机</td>
                        <td class="formValue">
                            <input id="MobilePhone" name="MobilePhone" type="text" class="form-control" data-bind="value:Model().MobilePhone" />
                        </td>
                    </tr>
                    <tr>
                        <td class="formTitle">微信</td>
                        <td class="formValue">
                            <input id="WeChat" name="WeChat" type="text" class="form-control " data-bind="value:Model().WeChat" />

                        </td>
                        <td class="formTitle">电话</td>
                        <td class="formValue">
                            <input id="Telephone" name="Telephone" type="text" class="form-control" data-bind="value:Model().TelePhone" />
                        </td>
                    </tr>
                    <tr>
                        <td class="formTitle">邮箱</td>
                        <td class="formValue">
                            <input id="Email" name="Email" type="text" class="form-control" data-bind="value:Model().Email" />
                        </td>
                        <td class="formTitle">传真</td>
                        <td class="formValue">
                            <input id="Fax" name="Fax" type="text" class="form-control" data-bind="value:Model().Fax" />
                        </td>
                    </tr>
                    <tr>
                        <td class="formTitle">地址</td>
                        <td class="formValue" colspan="3">
                            <input id="txtAddress" name="txtAddress" class="form-control" data-bind="value:Model().Address" />
                        </td>
                    </tr>
                    <tr>
                        <th class="formTitle">选项</th>
                        <td class="formValue" colspan="3" style="padding-top:1px;">
                            <div class="ckbox">
                                <input id="F_EnabledMark" name="F_EnabledMark" type="checkbox" data-bind="checked:Model().EnabledMark"><label for="F_EnabledMark">是否有效</label>
                            </div>
                            @*<label><input type="radio" name="IsEnabled" value="true" data-bind="typedChecked:Model().EnabledMark,dataType:'bool'" />是</label>
                                <label><input type="radio" name="IsEnabled" value="false" data-bind="typedChecked:Model().EnabledMark,dataType:'bool'" />否</label>*@
                        </td>
                    </tr>

                    <tr>
                        <td class="formTitle" valign="top" style="padding-top: 5px;">
                            备注
                        </td>
                        <td class="formValue" colspan="3">
                            <textarea id="Description" name="Description" class="form-control" style="height: 60px;" data-bind="value:Model().Description"></textarea>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </form>
</dialogbox>


<script type="text/javascript">
    var _getModelsUrl = "@this.Href("~/Organize/GetModels")";
    var _addModelUrl = "@this.Href("~/Organize/Add")";
    var _updateModelUrl = "@this.Href("~/Organize/Update")";
    var _deleteModelUrl = "@this.Href("~/Organize/Delete")";
    var _getSelectTreeDataUrl = "@this.Href("~/Organize/SelectTreeData")";
    var _getTreeDataUrl = "@this.Href("~/Organize/TreeData")";
    var _getComboTreeDataUrl = "@this.Href("~/Organize/ComboTreeData")";
    var _checkExistSortUrl = "@this.Href("~/Organize/CheckSortId")";

    var _vm;

    $(function () {

        var vm = new ViewModel();
        _vm = vm;

        ko.applyBindings(vm);//激活Knockout

        vm.Init(); //加载数据
    });

    function ViewModel() {
        var me = this;
        ViewModelBase.call(me);
        vmExtend.call(me);

        

        me.DeleteUrl = _deleteModelUrl;

        me.Dialog = new Dialog(me);

        me.OnDelete = function () {
            me.DeleteRow(function (result) { 
                //重新加载Tree
                me.RefreshControl();
            });
            
        }
        /*重写刷新控件*/
        me.RefreshControl = function () {

            $dh.get(_getSelectTreeDataUrl, null, function (result) { 

                //$('#Org_ParentId').combotree("loadData", result);//此方法，加载数据会出现选不了数据的情况
                $('#Org_ParentId').combotree({ data: result });
                $('#orgTree').tree('loadData', result);
            });

            

            
            //var treeObj = $.fn.zTree.getZTreeObj("orgTree");
            //treeObj.destroy();
            //me.BindOrgTree();

            //$('#Org_ParentId').combotree("reload", _getSelectTreeDataUrl);

            

            
            
        }

    }

    function vmExtend() {
        var me = this;

        me.Init = function () {

            me.InitControl();

            me.LoadModels();
            
        }

        me.InitControl = function () {

            $('#CategoryId').bindSelect2();

            me.BindSelectOrgTree();

            me.BindOrgTree();
        }


        me.LoadModels = function (page) {
            me.DataTable.SelectedModel(null);
            var data = me.SearchModel();//绑定搜索框内容
            var pageIndex = page || 1;
            
            data.pageIndex = pageIndex;
            $dh.get(_getModelsUrl, data, function (result) {
                me.DataTable.SetPagedData(result.Data);
            }
         );
        }

        //下拉选择组织树
        me.BindSelectOrgTree = function () {
            $('#Org_ParentId').bindComboTree({ url: _getSelectTreeDataUrl, defaultValue: '00000000-0000-0000-0000-000000000000' }, function (data) {
                
            }); 

        }

        //组织树
        me.BindOrgTree = function () {
            //post请求
            $('#orgTree').tree({
                url: _getComboTreeDataUrl,
                loadFilter: function (data) {
                    if (data.d) {
                        return data.d;
                    } else {
                        return data;
                    }
                },
                onSelect: function () {
                    var va = $('#orgTree').tree("getSelected");
                    //var tx = $('#orgTree').tree("getText");

                    me.DataTable.SelectedModel(null);
                    var data = me.SearchModel();//绑定搜索框内容
                    data.pageIndex = 1;
                    data.orgParentId = va.id;
                    $dh.get(_getModelsUrl, data, function (result) {
                        me.DataTable.SetPagedData(result.Data);
                    });
                }
            });

            //easuyi tree -》 ztree
            //var setting = {
                
            //    view: { selectedMulti: false },
            //    data: {
            //        key: {
            //            name: 'text',
            //            title: 'text'
            //        },
            //        simpleData: {
            //            enable: true,
            //            idKey: 'id',
            //            pIdKey: 'parentId',
            //            rootPId: 'null'
            //        }
            //    },
            //    callback: {
            //        onClick: function (event, treeId, treeNode) {
            //            me.DataTable.SelectedModel(null);
            //            var data = me.SearchModel();//绑定搜索框内容
            //            data.pageIndex = 1;
            //            data.orgParentId = treeNode.id;
            //            $dh.get(_getModelsUrl, data, function (result) {
            //                me.DataTable.SetPagedData(result.Data);
            //            });
            //        }
            //    }
            //};
            //$.getJSON(_getTreeDataUrl, function (json) {
            //    var zTreeObj = $.fn.zTree.init($("#orgTree"), setting, json);

            //    //展开一级节点
            //    var treeObj = $.fn.zTree.getZTreeObj("orgTree");
            //    var rootNode = treeObj.getNodeByParam("id", "00000000-0000-0000-0000-000000000000", null);
            //    treeObj.expandNode(rootNode, true, false, true);

            //    //展开所有节点
            //    //zTreeObj.expandAll(false);
                
                
            //});

        }


    }

    function Dialog(vm) {
        var me = this;
        DialogBase.call(me);


        //重写事件
        me.OnOpen = function () {
            var model = me.EditModel();
            if (model) {
                var bindModel = $ko.toJS(model);
                me.Model(bindModel);

                $('#Org_ParentId').combotree("setValue", model.ParentId);
                //select2 bug,编辑的时候第一次选中失败
                var selector = "select2-CategoryId-container";
                $('#' + selector).html(exFunc(bindModel.CategoryId));
                $('#' + selector).attr('title', bindModel.CategoryId);

            }
            else {
                //编辑后，打开会保存原来的值
                me.Model({ EnabledMark: true, CategoryId: "", ParentId: "00000000-0000-0000-0000-000000000000" });
                $('#Org_ParentId').combotree("setValue", "00000000-0000-0000-0000-000000000000");
                var selector = "select2-CategoryId-container";
                $('#' + selector).html("==请选择==");
                $('#' + selector).attr('title', "==请选择==");
            }


        }


        me.OnSave = function () {
            var model = me.Model();

            model.ParentId = $('#Org_ParentId').combotree("getValue");
            model.ParentName = $('#Org_ParentId').combotree("getText");

            if (!$('#form1').formValid()) {
                return false;
            }

            var checkUrl = _checkExistSortUrl + "?parentId=" + model.ParentId + "&sortIndex=" + model.SortIndex;
            if (me.EditModel()){

                checkUrl = checkUrl + "&Id=" + model.Id;
            }
            $dh.get(checkUrl, null, function (result) {
                if (result.Status == ResultStatus.OK && result.Data.res == false) {
                    $dh.confirm(result.Msg, function () {
                        me.Submit(model);
                    });

                } else {
                    me.Submit(model);
                }
                
    
            });
            
            
        }

        me.Submit = function (model) {

            if (me.EditModel()) {
                $dh.post(_updateModelUrl, model, function (result) {
                    if (result.Status == ResultStatus.OK) {
                        $dh.msg(result.Msg);
                    } else {
                        $dh.alert(result.Msg);
                    }


                    me.Close();
                    vm.LoadModels();

                    //操作完成后重新加载tree
                    //RefreshTrees();
                    vm.RefreshControl();
                }
                );
            }
            else {
                $dh.post(_addModelUrl, model, function (result) {
                    if (result.Status == ResultStatus.OK) {
                        $dh.msg(result.Msg);
                    } else {
                        $dh.alert(result.Msg);
                    }
                    me.Close();
                    vm.LoadModels();

                    //操作完成后重新加载tree
                    //RefreshTrees();
                    vm.RefreshControl();
                }
                );
            }
        }
        
    }

    function exFunc(typeObj) {
        var typeValue = ko.utils.unwrapObservable(typeObj);
        if (typeValue == "Group") {
            return "集团";
        } else if (typeValue == "Company") {
            return "公司";
        } else if (typeValue == "Department") {
            return "部门";
        } else if (typeValue == "WorkGroup") {
            return "小组";
        }
        return "";
    }




</script>